<template>
  <el-dialog
    title="为账户 CAFFEBABE 购买会员"
    :visible="$store.state.vipPanelShow"
    width="50%"
    @close="$store.commit('toggleVipPanel')"
    >
    <el-card>
      <div slot="header">开通会员</div>
      <el-radio-group v-model="radio">
        <el-radio :label="3">1个月</el-radio>
        <el-radio :label="6">3个月</el-radio>
        <el-radio :label="9">1年</el-radio>
      </el-radio-group>
      <el-input placeholder="使用卡密" style="margin-top:20px"></el-input>
      <el-button type="warning" @click="showQrCode = !showQrCode" size="mini" style="float:right;margin-top:10px" plain>购买</el-button>
      <h3 style="color:FF6600">￥20.00</h3>
    </el-card>
    <el-collapse-transition>
      <el-card style="margin-top:20px" v-if="showQrCode">
      <div slot="header">支付二维码</div>
      <div style="text-align:center">
        <img width="256px;height:256px" src="/imgs/qrcode.png" alt="">
      </div>
    </el-card>
    </el-collapse-transition>
    <el-card style="margin-top:20px">
      <div slot="header">会员特权</div>
      <el-row :gutter="20">
        <el-col :span="4">
          <img src="" alt="">
        </el-col>
        <el-col :span="20">
          <div class="vip-detail">
            <h3>减免配送费</h3>
            <p>每月减免30单，每日可减免3单，每单最高减4元</p>
            <p>蜂鸟专送专享</p>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="4">
          <img src="" alt="">
        </el-col>
        <el-col :span="20">
          <div class="vip-detail">
            <h3>减免配送费</h3>
            <p>每月减免30单，每日可减免3单，每单最高减4元</p>
            <p>蜂鸟专送专享</p>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      radio: 3,
      showQrCode: false
    }
  }
}
</script>

<style lang="less" scoped>
  .vip-detail {
    margin-top: -20px;
    p {
      padding: 0;
    }
  }
</style>
